<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="js/bootstrap.css" rel="stylesheet" />
		<script src="js/angular.js"></script>
		<script type="text/javascript">
			var widths=document.documentElement.clientWidth;
				document.documentElement.style.fontSize=widths/750*100+"px";
				window.onresize=function(){
		 			document.location.reload()  
			}
		</script>
		<style type="text/css">
			body {
				font-family: "微软雅黑";
			}
			.s-tou{
			    width: 100%;
			    height: 1.2rem;
			    background: #DB7093;
			    display: flex;
			    justify-content: center;
			    align-items:center;
			        font-size: 0.4rem;
			} 
			.pagination {
				margin: 0;
				padding: 0;
			}
			
			body {
				width: 100%;
    			height:100% ;
				background: url(img/psb.jpg) no-repeat;
				background-size:7.5rem 11.8rem;
			}
			
			.page-header {
				width: 100%;
				height: 0.3rem;
				color: white;
				text-align: center;
				line-height:0.3rem;
				font-family: 华文新魏;
				font-size: 0.45rem;
			}
			thead tr th{
				font-size:0.3rem;
				color: white;
			}
			tbody tr td{
				font-size:0.26rem;
				color:blue;
			}
			#jeshu{
				width: 1rem;
				height: 0.5rem;
				font-size: 0.3rem;
				color:palevioletred;
				background: white;
				text-decoration: none;
				text-align: center;
				line-height: 0.5rem;
			}
			.btn-primary{
				width: 2rem;
				height: 0.5rem;
				color:black;
				font-size: 0.3rem;
			}
			.form-horizontal{
				height: 5rem;
				
			}
			.control-label{
				font-size: 0.25rem;
			}
			.form-control{
				height: 0.5rem;
				font-size: 0.3rem;
			}
		</style>
	</head>

	<body ng-app="myapp" ng-controller="zd">
		<div class="s-tou">
		   <p>【浅殇】账单</p>
		</div>

		<div class="container" style="margin-top: 0.5rem;">

			<div class="page-header">
				<h2><strong>淡淡的忧伤</strong></h2>
			</div>

			<!-- 添加账单 -->
			<table class="table table-striped table-bordered" id="results">
				<caption>
					<div style="float:right;padding:5px">
						<a href="#" class="btn btn-primary btn-sm" onclick="showAdd()">添加账单</a>
					</div>
				</caption>

				<thead>
					<tr>
						<th>和**一起</th>
						<th>消费地方</th>
						<th>花费金额</th>
						<th>记账时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="v in arr">
						<td>{{v.name}}</td>
						<td>{{v.df}}</td>
						<td>{{v.mouty}}</td>
						<td>{{v.time |date : 'yyyy-MM-dd'}}</td>
						<td>
							 <button class="btn btn-warning btn-sm" ng-click="xg($index)" style="color: black;width:1rem;height:0.4rem;font-size: 0.25rem;">编辑</button> 
							<button class="btn btn-warning btn-sm" ng-click="rm($index)" style="color: black;width:1rem;height:0.4rem;font-size: 0.25rem;">删除</button>
						</td>
					</tr>
					<!--<tr>

						<td colspan="4" style="font-family:kartikak; color: white;font-size: 20px;">下次不卖啦！又没钱啦！</td>
					</tr>-->
				</tbody>
			</table>
			<!-- 查询结果结束 -->
		</div>

		<!-- 添加/修改员工信息的弹出对话框开始 -->
		<div class="modal fade" id="employeeDlg">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" style="font-size: 0.3rem;">&times;</button>
						<h4 class="modal-title" style="font-size: 0.3rem;">次数：</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="name" class="col-md-3 control-label">和**一起：</label>
								<div class="col-md-8">
									<input type="text" id="name" placeholder="名称" class="form-control" ng-model="name" />
								</div>
							</div>
							
							<div class="form-group">
								<label for="gender" class="col-md-3 control-label">消费地方：</label>
								<div class="col-md-8">
									<input type="text" id="name" placeholder="消费地方" class="form-control" ng-model="df" />
								</div>
							</div>
							
							<div class="form-group">
								<label for="gender" class="col-md-3 control-label">金额：</label>
								<div class="col-md-8">
									<input type="text" id="name" placeholder="金额" class="form-control" ng-model="mouty" />
								</div>
							</div>

							<div class="form-group">
								<label for="birthday" class="col-md-3 control-label">时间：</label>
								<div class="col-md-8">
									<input type="date" id="birthday" class="form-control" ng-model="time" />
								</div>
							</div>

							<div class="form-group">
								<div class="text-center form-group">
									<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="add()">收藏</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<a href="sy1.html" id="jeshu" style="font-family：华文彩云;">退出</a>
		<!-- 添加/修改员工信息的弹出对话框结束 -->

		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/bootbox.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#results td button.btn-primary").bind("click", showEdit);
				$("#results td button.btn-warning").bind("click", deleteConfirm);
			});

			function showAdd() {
				clearDlg();
				$("#employeeDlg").modal({
					"backdrop": "static"
				});
			}
			
			function showEdit(ev) {
				var tr = ev.target.parentElement.parentElement;
//				fillDlg($(tr));
				$("#employeeDlg").modal({
					"backdrop": "static"
				});
			}

			function clearDlg() {
				$(".modal-title").html("添加账单");
				$("#name").val("");
				// $("#male").attr("checked", false);
				$("#birthday").val("");
				$("#department").val("");
			}

			function deleteConfirm(ev) {
				var tr = $(ev.target.parentElement.parentElement);
				var name = tr.children()[1].innerHTML;
				bootbox.confirm("确实要删除账单【" + name + "】吗？", function(choice) {
					if(choice) {
						tr.remove();
					}
				});
			}

			var app = angular.module("myapp", []);
			app.controller("zd", function($scope) {

				$scope.mouty = $scope.m;

				dataStr = localStorage.getItem('ly');
				if(dataStr) {
					dataObj = JSON.parse(dataStr);
					$scope.arr = dataObj.info;

				} else {
					localStorage.setItem('ly', '{"info":[]}');
				}
				$scope.add = function() {

					dataStr = localStorage.getItem('ly');
					dataObj = JSON.parse(dataStr)
					dataObj.info.push({
						"name": $scope.name,
						"df":$scope.df,
						"mouty": $scope.mouty,
						"time": $scope.time
					});
					$scope.arr = dataObj.info;
					dataStr = JSON.stringify(dataObj);
					localStorage.setItem('ly', dataStr);

				}

				$scope.rm = function(index) {

					dataObj.info.splice(index, 1);

					dataStr = JSON.stringify(dataObj);
					localStorage.setItem('ly', dataStr);

				}
				$scope.xg = function(index) {

					arr1=dataObj.info;
					console.log(arr1[index])
					arr[index]={
						"name": $scope.name,
						"df":$scope.df,
						"mouty": $scope.mouty,
						"time": $scope.time}
					dataStr = JSON.stringify(dataObj);
					localStorage.setItem('ly', dataStr);
					clearDlg();
					$("#employeeDlg").modal({
						"backdrop": "static"
					});
				}

			})
		</script>
		<script>
			var data = JSON.parse(localStorage.getItem('ly'));
			console.log(data)
			for(var i = 0; i < data.length; i++) {
				console.log(data[1]);

			}
		</script>
	</body>

</html>